<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>在线抽奖</title>
    <link rel="stylesheet" href="3rd/element-ui@2.13.2/lib/theme-chalk/index.css"/>
    <link rel="stylesheet" href="css/app.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
</head>
<body>
<div id="app" class="bg" v-cloak>
    <div class="next title" v-if="awards[currentAwardIndex]">
        <span class="title">
          {{ awards[currentAwardIndex].name }}
          ({{!result[currentAwardIndex] ? 0 : result[currentAwardIndex].length}}/{{awards[currentAwardIndex].count}})
        </span>
        <span v-show="awards[currentAwardIndex]"
        >, 奖品：{{ awards[currentAwardIndex].award }}</span
        >
    </div>
    <div style="text-align: right;">
        <el-link href="http://zhixiaoyixue.com/pages/component/contributeList/contributeList" type="primary" style="margin: 30px;">返回抽奖设置</el-link>

    </div>
    <div class="batch flexbox"
         v-show="showCurrent">
        <div class="player" v-for="(item, index) in awardLuckyPlayers" :key="index" @click="onKick(item)">
            {{ item.name }}
        </div>
    </div>
<!--    <template v-if="!running && !goOn">-->
<!--        <div class="result">-->
<!--            &lt;!&ndash; 使用el-collapse-transition标签包裹着需要折叠的元素 &ndash;&gt;-->
<!--            <el-button size="small" type="primary" v-if="showResultButton" @click="toggleResult">本奖项所有中奖人员</el-button>-->
<!--            <div v-show="showResult" style="width: 300px; margin-top: 10px;">-->
<!--                <el-collapse-transition>-->
<!--                    <div>-->
<!--                        <div-->
<!--                                @click="onKick(item, index)"-->
<!--                                class="lucky-dog"-->
<!--                                v-for="(item, index) in result[currentAwardIndex]"-->
<!--                                :key="index"-->
<!--                        >-->
<!--                            {{ item.name }}-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </el-collapse-transition>-->
<!--            </div>-->
<!--        </div>-->
<!--    </template>-->
    <div id="myCanvasContainer">
        <canvas id="myCanvas" ref="canvas" style="width: 100%; height: 100%">
            <p>换个现代浏览器吧！</p>
        </canvas>
    </div>
    <div id="tags">
        <ul>
            <li v-for="(item, index) in members" :key="index">
                <a href="#" target="_blank">{{ item.name }}</a>
            </li>
        </ul>
    </div>
    <div class="buttons">
<!--        <el-select v-model="currentAwardIndex" size="small" style="width: 180px;">-->
<!--            <el-option-->
<!--                    v-for="(item, index) in awards"-->
<!--                    :key="index"-->
<!--                    :label="item.name"-->
<!--                    :value="index"-->
<!--            ></el-option>-->
<!--        </el-select>-->
        <el-button size="small" @click="toggle" ref="action" :disabled="disabledToggle" type="primary">
            {{ toggleButtonText }}
        </el-button>
<!--        <el-button size="small" @click="goNext" :disabled="running || currentAwardIndex == awards.length-1"-->
<!--                   type="success">下一轮-->
<!--        </el-button>-->
        <el-button
                size="small"
                :disabled="running"
                type="warning"
                size="small"
                class="el-icon-refresh"
                @click="onReplay"
                circle
        ></el-button>
        <span style="color: #fff; margin-left:10px;">{{players.length}}</span>
    </div>
</div>
<script src="3rd/polyfill.min.js"></script>
<script src="3rd/tagcanvas.min.js"></script>
<script src="3rd/vue.min.js"></script>
<script src="3rd/element-ui@2.13.2/lib/index.js"></script>
<script src="3rd/axios.min.js"></script>
<script src="js/util.js"></script>
<script src="js/draw.js"></script>
</body>
</html>
